* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(45deg, pink, deeppink);  
    min-height: 100vh;  
}

.content {
    position: relative;
    width: 400px;
    height: 400px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.content .menu {
    font-size: 2em;
    background: #fff;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: 2;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;

    transition: 1.25s;  /*过渡效果：过渡时间*/
}

.content.active .menu {
    color: pink;
    transform: rotate(315deg);  /*定义 2D 旋转*/
}

.content li {
    list-style: none;
    position: absolute;
    left: 0;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    transform: rotate(0) translateX(170px);
    transform-origin: 200px; /*设置旋转元素的基点位置*/
    transition: 0.5s;
    transition-delay: calc(0.1s * var(--i)); /*过渡效果：过渡时间*/
}

.content.active li {
    transform: rotate(calc(360deg / 8 * var(--i))); /*定义 2D 旋转*/
}


.content li a{
    color: #111;
     transform: rotate(calc(360deg / -8 * var(--i))); /* 使图标转正 */
}

.content li a:hover{
    color: pink;
}



